npm<template>
  <div class="login">
    <!-- <div class="login-title">
      <h3 class="title">杰讯云平台</h3>
    </div> -->
    <div class="login-content">
      <div class="login-from">
        <div class="login_head_image">
          <img src="/images/qd/logo.png" />
        </div>
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          label-position="right"
          label-width="auto"
          title="登录"
        >
          <el-form-item prop="username" label="账号">
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="用户名/手机号"
              name="username"
              type="text"
            />
          </el-form-item>

          <el-form-item prop="password" label="密码">
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              :type="passwordType"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleLogin"
            />
          </el-form-item>
          <el-form-item style="margin-left: -50px">
            <el-button @click="handleLogin">登录</el-button>
          </el-form-item>
          <el-form-item class="register">
            <el-link type="info" target="_blank" @click="register"
              >立即注册</el-link
            >
            <el-link type="info" target="_blank" @click="resetPassword"
              >忘记密码?</el-link
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken } from "@/utils/auth";

export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, trigger: "blur", message: "请输入账号" }],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      loading: false,
      passwordType: "password",
      redirect: undefined,
      loginShow: true,
      registerShow: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then((res) => {
              // console.log('eeeeee', res)
              if (res.status) {
                var localStorage = window.localStorage;
                localStorage.setItem(
                  "LoginUser",
                  JSON.stringify(res.data.user)
                );
                setToken(res.data.token);
                localStorage.setItem("UserToken", res.data.token);

                this.$router.push({
                  path: this.redirect || "/device/index",
                });
              } else {
                this.$message.error(res.message);
              }
              this.loading = false;
            })
            .catch((e) => {
              console.error(e);
              this.$message.error("网络错误!");
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    register() {
      this.$router.push({ path: "/register" });
    },
    resetPassword() {
      this.$router.push({ path: "/resetPassword" });
    },
  },
};
</script>

<style lang="scss">
html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.login {
  width: 100%;
  // font: 18px;
  height: 100vh;
  background: url("/images/qd/bg.jpg") no-repeat center;
  background-size: cover;
  .login-content {
    width: 100%;
    height: 100vh;
    background: rgba(48, 47, 47, 0.9);
    overflow: hidden;
    .login-from {
      margin: 20vh 20vw;
      padding: 10px;
      width: 300px;
      height: 400px;
      color: skyblue;
      // background-color: #e8ffff;
      background: rgba(248, 250, 250, 0.1);
      box-shadow: 0px 15px 25px rgba(190, 144, 144, 0.5);
      border-radius: 5px;
      position: relative;
      .login_head_image {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        top: 16%;
        left: 50%;
        transform: translate(-50%, -50%);
        img {
          width: 100%;
          margin-top: 60px;
        }
      }
      .el-form {
        margin-top: 150px;
      }
    .el-form-item__label {
      color: #fff!important;
    }
      .el-button {
        width: 100%;
        margin-left: -148 !important;
      }

      .register {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .el-link:first-child {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
